import React, { useState } from 'react';
import { Form, Button, Input, Modal } from 'antd';

import { UserToggleParam } from '../data.d';

export interface DisableFormProps {
  onCancel: (flag?: boolean, formVals?: UserToggleParam) => void;
  onSubmit: (values: UserToggleParam) => void;
  toggleUserModalVisible: boolean;
  values: UserToggleParam;
}
const FormItem = Form.Item;

const formLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 13 },
};

const ToggleForm: React.FC<DisableFormProps> = (props) => {
  const [formValues, setFormValues] = useState<UserToggleParam>({
    id: props.values.id,
    loginName: props.values.loginName,
    name: props.values.name,
    isEnabled: props.values.isEnabled,
  });

  const actionStr = formValues.isEnabled ? '停用': '启用';
  const [form] = Form.useForm();

  const {
    onSubmit: handleToggle,
    onCancel: handleToggleUserModalVisible,
    toggleUserModalVisible,
  } = props;

  const handleRealToggle = async () => {
    const fieldsValue = await form.validateFields();
    setFormValues({ ...formValues, ...fieldsValue });
    handleToggle({ ...formValues, ...fieldsValue });
  }


  const renderFooter = () => {
    return (
      <>
        <Button onClick={() => handleToggleUserModalVisible(false)}>取消</Button>
        <Button type="primary" onClick={() => handleRealToggle()}>{actionStr}</Button>
      </>
    );
  };

  return (
    <Modal
      width={640}
      bodyStyle={{ padding: '32px 40px 48px' }}
      destroyOnClose
      title="启用或停止用户"
      visible={toggleUserModalVisible}
      footer={renderFooter()}
      onCancel={() => handleToggleUserModalVisible()}
    >
      <Form
        {...formLayout}
        form={form}
        initialValues={{
          id: formValues.id,
          loginName: formValues.loginName,
          name: formValues.name,
          isEnabled: formValues.isEnabled,
        }}
      >
        <FormItem
          name="id"
          label="id"
        >
          <Input disabled />
        </FormItem>
        <FormItem
          name="loginName"
          label="登陆用户"
        >
          <Input disabled />
        </FormItem>
        <FormItem
          name="name"
          label="姓名"
        >
          <Input disabled />
        </FormItem>
        <FormItem
          name="isEnabled"
          label="状态"
        >
          <Input disabled />
        </FormItem>
      </Form>
    </Modal>
  );
};

export default ToggleForm;
